<!--
 * @Autor: dingxiaolin
 * @Date: 2021-01-06 16:59:54
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-02-08 09:33:44
-->

<template>
    <div class="errPage-container">
        <el-row>
            <el-col :span="12">
                <h1 class="text-jumbo text-ginormous">Oops!</h1>
                <h2>你没有权限去该页面</h2>
                <h6>如有需要请联系管理员分配权限</h6>
                <h6>或者你可以:</h6>
                <ul class="list-unstyled">
                    <li class="link-type">
                        <el-button @click="back" type="primary" plain size="mini">返回</el-button>
                    </li>
                    <li class="link-type">
                        <el-button @click="goLogin" type="primary" plain size="mini">回登录页</el-button>
                    </li>
                </ul>
            </el-col>
            <el-col :span="12">
                <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream." />
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
const gif = require('@/assets/img/401.gif');

@Component
export default class Page401 extends Vue {
    public errGif = gif;
    created() {}
    back() {
        this.$router.back();
    }
    goLogin() {
        sessionStorage.clear();
        location.reload();
        this.$router.push('/login');
    }
}
</script>

<style lang="scss" scoped>
.errPage-container {
    background: #fff;
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    .pan-back-btn {
        background: #008489;
        color: #fff;
    }
    .pan-gif {
        margin: 0 auto;
        display: block;
    }
    .pan-img {
        display: block;
        margin: 0 auto;
    }
    .text-jumbo {
        font-size: 60px;
        font-weight: 700;
        color: #484848;
        margin: 70px;
    }
    .list-unstyled {
        font-size: 14px;
        li {
            padding-bottom: 5px;
        }
        a {
            color: #008489;
            text-decoration: none;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}
</style>
